<template>	
	<view class="login-bg">
		<view style="height: 100rpx;"></view>
		<view class="index-box">
			<view class="index-content">
				<view class="login-title">
					<view class="font choose">
						登录
					</view>
				</view>
		
				<view v-if="tab==0">
					<view class="login-box">
						<view class="login-box-input" style="margin-bottom: 0;">
							<view class="login-box-line">
								<uv-row justify="space-between">
									<uv-col span="8">
										<uv-input class="login-box-line-input" type="number" placeholder="请输入手机号" border="none" v-model="phone"></uv-input>
									</uv-col>
									<uv-col span="3" v-if="secDown == 60" class="login-num-but" @click="sendMobile">
										获取验证码
									</uv-col>
									<uv-col span="3" v-else class="login-num-but2" style="font-size: 28rpx; padding: 10rpx 40rpx;">
										{{secDown}}
									</uv-col>
								</uv-row>
								
							</view>
							<!-- <view class="err">占用</view> -->
						</view>
							
						<view class="login-box-input">
							<view class="login-box-line">
								<uv-input class="login-box-line-input" type="number"
									placeholder="请输入验证码"
									border="none"
									v-model="code"
									maxlength="6"
									></uv-input>
							</view>
							<!-- <view class="err">占用</view> -->
						</view>
						<view class="login-but" @click="loginInto">
							立即登录
						</view>
					</view>
				</view>

					<!-- 协议 -->
					<view class="read-box">
						<view @click="(readNum===0)?readChoose(1):readChoose(0)" :class="readNum===0?'read':'read read-choose'"></view>
							<view style="display: inline-block;">已阅读并同意
							<span @click="goText">《服务协议》
							</span>和
							<span @click="goText3">《隐私政策》</span>
						</view>
					</view>
				</view>

			
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				tab:0,
				readNum:0,
				phone:'',
				code:'',
				name:'',
				password:'',
				secDown: 60
			}
		},
		components: { TopHeigth },
		onLoad() {
			/* uni.setNavigationBarColor({
			  backgroundColor: 'red' // 导航栏背景颜色
			}); */
		},
		
		mounted() {

		},
		beforeDestroy() {

		},
		methods: {
			loginInto(){
				if(!this.phone || !this.code){
					return uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					});
				}
				if(!this.readNum){
					return uni.showToast({
						title: '请勾选用户协议',
						icon: 'none'
					});
				}
				
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/loginMobile',{staffMobile: this.phone, code: this.code}).then((res) => {
					if(res.code != 200){
						return uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
					uni.setStorageSync('userInfo', res.data);
					uni.switchTab({
						url: "/pages/index/index"
					})
				})
			},
			sendMobile(){
				if(!this.phone || this.phone.length != 11){
					return uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
				}
				uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/sendMobile',{userMobile: this.phone}).then((res) => {
					
					let timer = setInterval(() => {
						this.secDown --;
						if(this.secDown == 0){
							clearInterval(timer);
							this.secDown = 60
						}
					}, 1000)
					
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
				})
			},
			goText: function(){
				uni.navigateTo({
					url: '/pages/login/text'
				});
			},
			goText3: function(){
				uni.navigateTo({
					url: '/pages/login/text3'
				});
			},
			readChoose(num){
				this.readNum = num
			},
			/* goText(){
				uni.preloadPage({url: "/pages//login/text"});
			}, */
	
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	
	
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
	.desc {
		/* text-indent: 40rpx; */
	}
	.flex-pc {
		display: flex;
		justify-content: center;
	}
	
	
	
	
	.index-box{
			height: 90vh;
			/* background: url("/static/image/login-back.png") no-repeat; */
			background-size: 100% auto;
	}
	.index-content{
		padding:120rpx 60rpx 0;
	}
	.login-title{
		width: 100%;
		margin-bottom: 100rpx;
	}
	.login-title .font{
		color:#999;
		width: 170rpx;
		padding-bottom: 10px;
		color:#333333;
		font-size: 54rpx;
		font-weight: bold;
	}
	.login-title:first-child .font{
		margin-left:0;
	}
	.login-title .font span{
		padding-bottom: 16rpx;
	}
	.login-title .font.choose span{
		// background: url("/static/image/index/choose.png") center bottom no-repeat;
		background-size: 40rpx auto;
	}
	
	.login-box-title{
		color: #323233;
		font-weight: 500;
		font-size:24rpx;
	}
	.login-box-input{
		margin-bottom: 40rpx;
	}
	.login-box-input .err{
		color: red;
		font-size: 24rpx;
		font-weight: bold;
	}
	.login-box-line{
		padding: 40rpx 0 20rpx 0;
		border-bottom: 1px solid #DDDDDD;
		margin-bottom: 10rpx;
	}
	.login-box-line-input{
		font-size: 32rpx;
		height: 40rpx;
		padding: 0 !important;
		
		/*border:none;
		-webkit-appearance:none;去除阴影边框
		outline: none;
		-webkit-tap-highlight-color:rgba(0,0,0,0);点击高亮的颜色*/
	}
	
	.login-num-but{
		width: 100%;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 64rpx;
		color:#01B88C;
		text-align: center!important;
		background: rgba(39,143,255,0.1);
		border-radius: 8rpx;
		cursor: pointer;
	}
	.login-num-but2{
		color:#999;
		background: #EFF5F5;
		text-align: center !important;
	}
	.login-but{
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 96rpx;
		color:#fff;
		text-align: center;
		background: #01B88C;
		border-radius:48rpx;
		margin-top: 50rpx;
	}
	.login-chack{
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 96rpx;
		color:#fff;
		text-align: center;
		background: #18D3FE;
		border-radius:48rpx;
		margin-top: 100rpx;
	}
	.read-box{
		@include flex;
		width: 100%;
		margin-top: 40rpx;
		font-size: 24rpx;
		position: fixed;
		bottom: 150rpx;
	}
	.read-box span{
		color: #01B88C;
		cursor: pointer;
	}
	.read{
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background:url("/static/image/pay-box11.png") no-repeat center;
		background-size: 28rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}
	.read-choose{
		width: 28rpx;
		height: 28rpx;
		background:url("/static/image/pay-box22.png") no-repeat center;
		background-size: 28rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}
	
	.forget{
		text-align: right;
		color: #18D3FE;
		font-size: 24rpx;
		cursor: pointer;
	}
	.login-bg{
		background: url("/static/image/back3.png") no-repeat;
		background-size: 100% auto;
		width: 100%;
	}
</style>
